<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="1050px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="agentInfo" label-width="184px" :rules="formRules">
                <!-- 账号输入框 -->
                <el-form-item label="agent名称" prop="name">
                    <el-input
                        v-model="agentInfo.title" 
                        placeholder="请输入"
                        clearable
                    />
                </el-form-item>
              <el-form-item label="启用否" prop="price1">
                <el-radio-group v-model="agentInfo.state">
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="0">禁用</el-radio>
                </el-radio-group>

              </el-form-item>

              
              <el-form-item label="收费类型" prop="price1">
                <el-radio-group v-model="agentInfo.feeType">
                  <el-radio :label="1">一种价格</el-radio>
                  <el-radio :label="2">两种价格</el-radio>
                </el-radio-group>

              </el-form-item>


              <el-form-item label="分类">
                <el-select v-model="agentInfo.bussType" placeholder="请选择分类">
                  <el-option
                      v-for="item in categoryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>

                <el-form-item label="会员价" prop="price1">
                    <el-input
                        v-model="agentInfo.coinVip" 
                        placeholder="请输入"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="非会员扫码支付价" prop="price2">
                    <el-input
                        v-model="agentInfo.scanCodeAmount" 
                        placeholder="请输入"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="非会员虚拟币价" prop="price3">
                    <el-input
                        v-model="agentInfo.coin" 
                        placeholder="请输入"
                        clearable
                    />
                </el-form-item>

                
              <el-divider />

                <el-form-item label="会员价" prop="membePrice" v-if="agentInfo.feeType == 2">
                    <el-input
                        v-model="agentInfo.membePrice" 
                        placeholder="请输入"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="非会员扫码支付价" prop="noMembeQrPrice" v-if="agentInfo.feeType == 2">
                    <el-input
                        v-model="agentInfo.noMembeQrPrice" 
                        placeholder="请输入"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="非会员虚拟币价" prop="noMembeVirtual" v-if="agentInfo.feeType == 2"> 
                    <el-input
                        v-model="agentInfo.noMembeVirtual" 
                        placeholder="请输入"
                        clearable
                    />
                </el-form-item>

  <el-divider  v-if="agentInfo.feeType == 2"/>



                <el-form-item label="简介" prop="desc">
                    <el-input
                        type="textarea"
                        :rows="4"
                        v-model="agentInfo.description" 
                        placeholder="请输入"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="logo">
                    <uploadimg v-model="logo"/>  
                </el-form-item>
                <el-form-item label="前端路由">
                    <el-input
                        v-model="agentInfo.url" 
                        placeholder="请输入"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="说明" prop="content">
                    <editor v-model="describeUrl"  :height="550"  />
                </el-form-item>
              <el-form-item label="左侧说明" prop="content">
                <editor v-model="agentInfo.richText"  :height="550"  />
              </el-form-item>
            </el-form>
        </popup>
    </div>
  </template>
  <script setup> 
  import {onMounted, ref, computed, reactive} from 'vue'
  import Popup from '@/components/popup/index.vue' 
  import { edit} from '@/apis/agent'
  import {addAgent} from "../../apis/agent.js";

  const emit = defineEmits(['success', 'close'])
  const formRef = ref(null)
  const popupRef = ref(null)
  const mode = ref('add') 
  const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑Agent' : '新增Agent'
  })
  const categoryOptions = [
    { label: '法务', value: 1 },
    { label: '财会', value: 2 },
    { label: '人力', value: 3 },
    { label: '申报（项目管理）', value: 4 },
    { label: '市场运营', value: 5 },
    { label: '通用', value: 6 }
  ];

  const agentInfo = ref({
    id: '',
    title: '',
    coin: '', //非会员单次消耗金币
    scanCodeAmount: '', //非会员扫码支付金额
    coinVip: '', //会员单次消耗金币
    description: '', //简介
    url: '', //logo图片
    state:1,
    bussType:"",
    richText:"",
    feeType:1,
    membePrice:"",
    noMembeQrPrice:"",
    noMembeVirtual:""
  })

  const describeUrl = ref('') 
  const logo = ref('')


  const handleSubmit = async () => {
    let data={
      logo: logo.value,
      describeUrl: describeUrl.value,
      agentInfo:JSON.stringify(agentInfo.value)
    }
    if(mode.value == 'edit'){
      await formRef.value?.validate()
      await edit(data)
    }else{
    delete  agentInfo.value.id
      data={
        logo: logo.value,
            describeUrl: describeUrl.value,
          agentInfo:JSON.stringify(agentInfo.value)
      }
      await formRef.value?.validate()
      await addAgent(data)

    }

    popupRef.value?.close()
    emit('success')
  }
  
  const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
  }

 

  const setFormData = async (row) => { 
    for (const key in agentInfo.value) {
        if (row[key] != null && row[key] != undefined) {

            agentInfo.value[key] = row[key]
        }
    } 
    describeUrl.value = row.describeUrl
    logo.value = row.logo
    console.log("🚀 ~ setFormData ~ logo.value:", logo.value)
  }
  
  const handleClose = () => {
    emit('close')
  }
  
  defineExpose({
    open,
    setFormData
  })
  </script>
  
  
  <style scoped lang="scss">
    .avatar-uploader .avatar {
      width: 100px;
      height: 100px;
      display: block;
   }
   .avatar-uploader :deep() .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader :deep() .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 20px !important;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
  }
  </style>